<template>
<div id="main">
<div id="search">
        <el-card>
      <el-form ref="userForm" :model="userForm" label-width="80px">
        <el-row
          ><el-col :span="8">
            <!-- 输入框长度 -->
            <el-form-item prop="user">
              <el-input
                v-model="userForm.user"
                placeholder="姓名/用户名/手机号/邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="btn">
            <el-button type="primary" @click="searchUser()">查询</el-button>
            <el-button @click="resetForm('userForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
</div>
    <div id="list">
        <el-card class="isTable">
      <el-button type="primary" @click="userAdd()">新增</el-button>
      <el-button type="primary" @click="userEdit()">编辑</el-button>
      <el-button type="primary" @click="userStart()">启用</el-button>
      <el-button type="primary" @click="userForbid()">停用</el-button>
      <el-button type="primary" @click="userDelete()">删除</el-button>
      <el-button type="primary" @click="userReset()">重置密码</el-button>
            <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="300px"
        stripe
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="item in columnList"
          :key="item.num"
          :label="item.label"
          :prop="item.prop"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column> -->
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
        </el-card>
         <UserAdd ref="userAdd"></UserAdd>
         <UserEdit ref="userEdit"></UserEdit>
    </div>
</div>


</template>

<script>
import UserAdd from "../userManages/UserAdd.vue";
import UserEdit from "../userManages/UserEdit.vue";
// import UserAdd from "UserAdd.vue";
export default{
    components:{
        UserAdd,
        UserEdit
    },
    data(){
        return{
            userForm: {
        user: "",
      },
       pageNum: 1,
      pageSize: 10,
      total: 0,

      columnList: [
        { label: "用户名", prop: "userName", num: 1 },
        { label: "姓名", prop: "nickName", num: 2 },
        { label: "性别", prop: "sex", num: 3 },
        { label: "手机号", prop: "phonenumber", num: 4 },
        { label: "邮箱", prop: "email", num: 5 },
        { label: "状态", prop: "status", num: 6 },
      ],
      tableData: [
        {
          userName: "zhangsan",
          nickName: "张三",
          sex: "男",
          email: "111111@qq.com",
          phonenumber: "13112312312",
          status: "启用",
        },
        {
          userName: "lisi",
          nickName: "李四",
          sex: "男",
          email: "111111@qq.com",
          phonenumber: "13112312312",
          status: "禁用",
        },
        {
          userName: "wangwu",
          nickName: "王五",
          sex: "男",
          email: "111111@qq.com",
          phonenumber: "13112312312",
          status: "启用",
        },
        {
          userName: "jia",
          nickName: "甲",
          sex: "男",
          email: "111111@qq.com",
          phonenumber: "13112312312",
          status: "启用",
        },
                {
          userName: "wangwu",
          nickName: "王五",
          sex: "男",
          email: "111111@qq.com",
          phonenumber: "13112312312",
          status: "启用",
        },
                {
          userName: "wangwu",
          nickName: "王五",
          sex: "男",
          email: "111111@qq.com",
          phonenumber: "13112312312",
          status: "启用",
        },
      ],
      multipleSelection: [],

        }
    },
    methods:{
    resetForm(userForm) {
      this.$refs[userForm].resetFields();
    },
     handleSelectionChange(row) {
      this.multipleSelection = row;
      // console.log(this.multipleSelection);

      // console.log(JSON.parse(JSON.stringify(this.multipleSelection)));
      // console.log(this.multipleSelection);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
    },
     searchUser() {
      console.log("查询");
    },
    userAdd(){
        this.$refs.userAdd.openDialog(true);
    },
    userEdit(){
        if (this.multipleSelection.length == 1) {
        this.$refs.userEdit.openDialog(
          true,
          JSON.parse(JSON.stringify(this.multipleSelection))
        );
      } else if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择数据进行修改",
          type: "info",
        });
      } else {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行修改",
          type: "info",
        });
      }
    },
    userStart(){
        if (this.multipleSelection.length == 1) {
        this.$confirm("是否启用?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "已启用",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消启用",
            });
          });
      }
      else if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择数据进行启用",
          type: "info",
        });
      } else {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行启用",
          type: "info",
        });
      }
    },
    userForbid(){
          if (this.multipleSelection.length == 1) {
        this.$confirm("是否停用?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "已停用",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消停用",
            });
          });
      } else if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择数据进行停用",
          type: "info",
        });
      }else {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行停用",
          type: "info",
        });
      }
    },
    userDelete(){
      if (this.multipleSelection.length >= 1) {
        this.$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "已删除",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message({
          showClose: true,
          message: "请先选中数据进行删除",
          type: "info",
        });
      }
    },
    userReset(){
            if (this.multipleSelection.length >= 1) {
        this.$confirm("是否重置密码?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "已重置密码",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消重置密码",
            });
          });
      } else {
        this.$message({
          showClose: true,
          message: "请先选中用户重置密码",
          type: "info",
        });
      }
    },

    }
}
</script>

<style lang="scss" scoped>
#search{
    width: 100%;
    height: 100px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 10px;
      .btn {
    margin-left: 20px;
  }
}
// #list{
//     width: 100%;
//     background-color: white;
//     border-radius: 10px;
// }
</style>